<html>
<head>
    <title>Facility Manager Online - HTML5 demo</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="http://miniapps.co.uk/canvas/styles.css" />
    <link rel="stylesheet" href="http://miniapps.co.uk/css/add2home.css" />
    <script type="text/javascript" src="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/js/kinetic2d-v1.0.0.js"></script>
    <script type="text/javascript" src="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/js/jquery.min.js"></script>
    <script type="text/javascript" src="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/js/jquery.event.wheel.js"></script>
    <script type="text/javascript" src="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/js/jquery.mobile-1.0b1.js"></script>
    <!--<link rel="stylesheet" href="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/css/jquery.mobile-1.0b1.css" />-->

    <script type="text/javascript">
    var kin;
    var message = "";
    var selectedObjects = [];
    var placesCount = 5000;
    var scale = 1.0;
    var images = {};
    var pos = {x : 0, y : 0};
    var delta = {x:0, y:0};
    var canvas;
    var contextWidth;
    var contextHeight;

    function zoomIn() {
        if (placesCount <= 1000) {
            placesCount -= 100;
        } else {
            placesCount -= 1000;
        }

        if (placesCount <= 0) {
            placesCount = 100;
        }
        kin.drawStage();
    }

    function zoomOut() {
        if (placesCount >= 1000) {
            placesCount += 1000;
        } else {
            placesCount += 100;
        }
        kin.drawStage();
    }

    function changeText(num) {
        $("#elementsCount").text("" + num);
    }

    function initStage() {
        kin = new Kinetic_2d("myCanvas");
        var canvas = $("#myCanvas");
        $("#myCanvas").attr("width", window.innerWidth);
        $("#myCanvas").attr("height", (window.innerHeight - 64));

        contextWidth = $("#myCanvas").attr("width");
        contextHeight = $("#myCanvas").attr("height");

        kin.setDrawStage(function(){
            changeText(placesCount);
            kin.clear();

            canvas.width = canvas.width;

            var context = kin.getContext();

            var placeWidth = Math.sqrt(contextWidth * contextHeight / placesCount);
            var currHeightPos = 0;
            var objectNum = 1;

            for (var i = 0; (currHeightPos + placeWidth) < contextHeight; i++) {
                currHeightPos = placeWidth * i;
                var currWidthPos = 0;
                for (var j = 0; currWidthPos + placeWidth < contextWidth; ++j) {
                    currWidthPos = placeWidth * j;
                    kin.beginRegion();
                    context.beginPath();
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                    context.moveTo(currWidthPos + delta.x, currHeightPos + delta.y);
                    context.lineTo(currWidthPos + delta.x + placeWidth, currHeightPos + delta.y);
                    context.lineTo(currWidthPos + delta.x + placeWidth, currHeightPos + placeWidth + delta.y);
                    context.lineTo(currWidthPos + delta.x, currHeightPos + placeWidth + delta.y);
                    context.lineTo(currWidthPos + delta.x, currHeightPos + delta.y);
                    context.closePath();
                    context.stroke();

                    for (var k = 0; k < selectedObjects.length; ++k) {
                        if (selectedObjects[k] == objectNum) {
                            context.beginPath();
                            context.fillStyle = "#00ff00";
                            context.moveTo(currWidthPos + delta.x, currHeightPos + delta.y);
                            context.lineTo(currWidthPos + delta.x + placeWidth, currHeightPos + delta.y);
                            context.lineTo(currWidthPos + delta.x + placeWidth, currHeightPos + placeWidth + delta.y);
                            context.lineTo(currWidthPos + delta.x, currHeightPos + placeWidth + delta.y);
                            context.lineTo(currWidthPos + delta.x, currHeightPos + delta.y);
                            context.closePath();
                            context.fill();

                            break;
                        }
                    }

                    kin.addRegionEventListener("onmouseover", function(){
                        //console.log("OnOver: object " + objectNum);
                    });
                    kin.addRegionEventListener("onmouseout", function(){
                        //console.log("OnOut: object " + objectNum);
                    });

                    kin.addRegionEventListener("onmousemove", function(){
                        context.beginPath();
                        context.fillStyle = "#ff0000";
                        context.moveTo(currWidthPos + delta.x, currHeightPos + delta.y);
                        context.lineTo(currWidthPos + delta.x + placeWidth, currHeightPos + delta.y);
                        context.lineTo(currWidthPos + delta.x + placeWidth, currHeightPos + placeWidth + delta.y);
                        context.lineTo(currWidthPos + delta.x, currHeightPos + placeWidth + delta.y);
                        context.lineTo(currWidthPos + delta.x, currHeightPos + delta.y);
                        context.closePath();
                        context.fill();
                    });

                    kin.addRegionEventListener("onmousedown", function(){
                        //alert("onmousedown");
                        console.log("OnDown: object " + objectNum);
                        selectedObjects.push(objectNum);
                    });
                    kin.closeRegion();
                    ++objectNum;
                }
            }
        });
    }

    function loadImages(sources, callback){
        var loadedImages = 0;
        var numImages = 0;
        for (var src in sources) {
            numImages++;
        }
        for (var src in sources) {
            images[src] = new Image();
            images[src].onload = function(){
                if (++loadedImages >= numImages) {
                    callback();
                }
            };
            images[src].src = sources[src];
        }
    }

    function setNewPlacesNum(num) {
        placesCount = num;
        kin.drawStage();
    }

    $(function(){
        document.addEventListener('touchmove', function(e) {
            e.preventDefault()
        }, false);
        var sources = {
            zoomin: "/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/zoomin.png",
            zoomout: "/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/zoomout.png"
        };
        initStage();

        $('body').bind('orientationchange',function(event){
            initStage();
        });

        canvas = document.getElementById("myCanvas");
    });

    function onMouseDown(event) {
        pos.x = event.pageX;
        pos.y = event.pageY;

        canvas.addEventListener('mousemove', onMouseMove, false);
        canvas.addEventListener('mouseup', onMouseUp, false);
    }

    function onMouseMove(event) {
        handleMoving(event);
    }

    function onMouseUp(event) {
        canvas.removeEventListener('mousemove', onMouseMove, false);
        canvas.removeEventListener('mouseup', onMouseUp, false);
    }

    function onTouchStart(event) {
        event.preventDefault();
        pos.x = event.targetTouches[0].pageX;
        pos.y = event.targetTouches[0].pageY;

        canvas.addEventListener('touchmove', onTouchMove, false);
        canvas.addEventListener('touchend', onTouchEnd, false);
        canvas.addEventListener('touchcancel', onTouchCancel, false);
    }

    function handleMoving(event) {
        delta.x += (-pos.x + event.targetTouches[0].pageX);
        delta.y += (-pos.y + event.targetTouches[0].pageY);
        kin.drawStage();
        pos.x = event.targetTouches[0].pageX;
        pos.y = event.targetTouches[0].pageY;
    }


    function onTouchMove(event) {
        event.preventDefault();

        handleMoving(event);
    }

    function onTouchEnd(event) {
        event.preventDefault();

        canvas.removeEventListener('touchmove', onTouchMove, false);
        canvas.removeEventListener('touchend', onTouchEnd, false);
        canvas.removeEventListener('touchcancel', onTouchCancel, false);
    }

    function onTouchCancel(event) {
        canvas.removeEventListener('touchmove', onTouchMove, false);
        canvas.removeEventListener('touchend', onTouchEnd, false);
        canvas.removeEventListener('touchcancel', onTouchCancel, false);
    }

    function enableSelect() {
        canvas.removeEventListener("touchstart", onTouchStart, false);
        canvas.removeEventListener("mousedown", onMouseDown, false);
    }

    function enablePan() {
        canvas.addEventListener("touchstart", onTouchStart, false);
        canvas.addEventListener("mousedown", onMouseDown, false);
    }

    </script>

    <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        button { font-size: 18;}

    </style>
</head>
<body>
<div style="width: 100%; height: 64px">
    <table><tr>
        <td>
    <img src="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/zoomin.png" width="48px" height="52px" onclick="zoomIn()" />
    <img src="/~releases/CAFM.Resources/FacilityManagerOnline/phase4/demo/zoomout.png" width="48px" height="52px" onclick="zoomOut()" />
        </td>
        <td style="vertical-align: middle; padding-left: 0px;">
            <button onclick="enablePan()" style="height:48px; ">Pan</button>
            <button onclick="enableSelect()" style="height:48px; ">Select</button>
            <span id="elementsCount" style="font-weight:bold; font-size: 20px;"></span>
        </td>
    </tr></table>

</div>
<canvas id="myCanvas"></canvas>
</body>
</html>